export const metadata = {
  title: 'Text Icons Effect',
  description:
    'An interactive React component that adds a dynamic bubble effect, visually tracking cursor movement in real time.',
};

<ComponentCodePreview name='texticon-cursor' />

## Installtion

```bash
npm install lucide-react
```

## useMouse

```tsx
'use client';
import { type RefObject, useLayoutEffect, useRef, useState } from 'react';

interface MouseState {
  x: number | null;
  y: number | null;
  elementX: number | null;
  elementY: number | null;
  elementPositionX: number | null;
  elementPositionY: number | null;
}

export function useMouse(): [MouseState, RefObject<HTMLDivElement>] {
  const [state, setState] = useState<MouseState>({
    x: null,
    y: null,
    elementX: null,
    elementY: null,
    elementPositionX: null,
    elementPositionY: null,
  });

  const ref = useRef<HTMLDivElement | null>(null);

  useLayoutEffect(() => {
    const handleMouseMove = (event: MouseEvent) => {
      const newState: Partial<MouseState> = {
        x: event.pageX,
        y: event.pageY,
      };

      if (ref.current instanceof Element) {
        const { left, top } = ref.current.getBoundingClientRect();
        const elementPositionX = left + window.scrollX;
        const elementPositionY = top + window.scrollY;
        const elementX = event.pageX - elementPositionX;
        const elementY = event.pageY - elementPositionY;

        newState.elementX = elementX;
        newState.elementY = elementY;
        newState.elementPositionX = elementPositionX;
        newState.elementPositionY = elementPositionY;
      }

      setState((s) => ({
        ...s,
        ...newState,
      }));
    };

    document.addEventListener('mousemove', handleMouseMove);

    return () => {
      document.removeEventListener('mousemove', handleMouseMove);
    };
  }, []);

  return [state, ref];
}
```

## Props

| Prop       | Type          | Default               | Description                                                                                                     |
| ---------- | ------------- | --------------------- | --------------------------------------------------------------------------------------------------------------- |
| `text`     | `string`      | `'Hello!'`            | The text to display next to the cursor.                                                                         |
| `color`    | `string`      | `'#000'`              | The color of the text and the dot.                                                                              |
| `font`     | `string`      | `'Arial, sans-serif'` | The font of the text.                                                                                           |
| `textSize` | `number`      | `14`                  | The size of the text in pixels.                                                                                 |
| `gap`      | `number`      | `5`                   | The gap between the dot and the text in pixels.                                                                 |
| `element`  | `HTMLElement` | `undefined`           | The HTML element where the cursor effect will be applied. If not specified, the effect applies to the document. |
| `size`     | `number`      | `10`                  | The size of the dot in pixels.                                                                                  |
